<!-- FooterBtn 立即购买 -->
<template>
  <view class="OrderFooterBtn" :class="customClass">
    <footer-btn
      :del-price="delPrice"
      :btn-txt="btnTxt"
      :disabled="disabled"
      class="btn-box"
      @click="handleClick"
      :price="prePrice"
    >
      <view slot="title" class="title flex flex-m">
        <view @click="handleShow">总价</view>
        <u-icon
          @click="handleShow"
          :class="{ 'icon-show': show }"
          class="ml5 icon"
          color="#ccc"
          name="arrow-down"
        />
      </view>
    </footer-btn>

    <u-action-sheet
      :round="25"
      class="footerBtn-sheet"
      @close="close"
      :show="show"
      title="价格明细"
    >
      <view class="content">
        <view class="content-item" v-if="film">
          <footer-cell
            class="mb5"
            type="title"
            title="电影票"
            :desc="filmDesc"
          />
          <footer-cell
            v-for="(item, index) in otherPayInfo"
            :key="index"
            class="mb5"
            :title="item.name"
            :desc="item.value"
          />
          <footer-cell
            v-if="film.cardInfo && ilm.cardInfo.cardId"
            class="mb5"
            title="电影卡"
            :desc="filmCardDesc"
          />
          <footer-cell
            v-if="juying.cardCode"
            class="mb5"
            title="聚影卡"
            :desc="juyingCardDesc"
          />
          <footer-cell
            v-if="film.coupons && film.coupons.length"
            class="mb5"
            title="电影优惠券"
            :desc="filmCouponDesc"
          />
          <footer-cell
            v-if="film.balance"
            class="mb5"
            title="余额"
            :desc="balanceDesc"
          />

          <footer-cell
            v-if="film.integral"
            class="mb5"
            title="积分"
            :desc="integralDesc"
          />
        </view>

        <view class="content-item" :class="{ 'zm-bor-t': film }" v-if="goods">
          <footer-cell
            class="mb5"
            type="title"
            :title="goodsTitle"
            :desc="titleDesc"
          />
          <footer-cell
            v-if="goods.couponMoney"
            class="mb5"
            title="卖品券"
            :desc="couponDesc"
          />
          <footer-cell
            v-if="goods.cardInfo && goods.cardInfo.money"
            class="mb5"
            title="电影卡"
            :desc="movieCardDesc"
          />
          <footer-cell
            v-if="goods.balance"
            class="mb5"
            title="余额"
            :desc="goodsBalanceDesc"
          />

          <footer-cell
            v-if="goods.integral"
            class="mb5"
            title="积分"
            :desc="goodsIntegralDesc"
          />
        </view>
      </view>
    </u-action-sheet>
  </view>
</template>

<script>
  import FooterBtn from '@/components/FooterBtn'
  import FooterCell from './FooterCell'
  export default {
    name: 'OrderFooterBtn',
    components: { FooterCell, FooterBtn },
    props: {
      prePrice: {
        type: [String, Number],
        default: 0
      },
      info: {
        type: Object
      },
      disabled: {
        type: Boolean,
        default: false
      },
      btnTxt: {
        type: String
      },
      delPrice: [String, Number]
    },
    data() {
      return {
        show: false
      }
    },
    computed: {
      film() {
        console.log('this.info:', this.info)
        if (this.info && this.info.film) {
          return this.info.film
        }
        return ''
      },

      juying() {
        if (this.film && this.film.juying) {
          return this.film.juying
        }
        return {}
      },

      // 其他优惠信息
      otherPayInfo() {
        console.log(this.film, '====', this.film.otherPayInfo)
        const otherPayInfo = !this.$utils.objIsNull(this.film)
          ? this.film.otherPayInfo
          : []
        console.log('otherPayInfo:', otherPayInfo)
        return otherPayInfo
      },

      // 其他优惠总价
      otherPayTotal() {
        console.log('this.otherPayInfo:', this.otherPayInfo)
        const total = this.$utils.arrayCalc(this.otherPayInfo, 'v')
        console.log(total)
        return total
      },

      filmCouponDesc() {
        const coupons = (this.film && this.film.coupons) || []
        const len = coupons.length
        if (!len) {
          return ''
        }
        let desc = ''
        const isType1 = coupons.find((i) => i.couponType === '1')
        if (isType1) {
          const differenceTotal = this.$utils.arrayCalc(coupons, 'difference')
          desc = `-${len}张(补差${differenceTotal.toFixed(2)}${
            this.ticketPriceUnit
          })`
        } else {
          const reduceTotal = this.$utils.arrayCalc(coupons, 'cutReduce')
          desc = `-${reduceTotal}${this.ticketPriceUnit}`
        }

        return desc
      },

      goods() {
        console.log(this.info)
        if (this.info && this.info.goods && this.info.goods.info) {
          return this.info.goods
        }
        return ''
      },

      goodsTitle() {
        // const query = this.$route.query
        // if (query.mallOrderId) {
        //   return '商品'
        // }
        return '卖品'
      },
      ticketPriceUnit() {
        return this.$auth.getLocBaseSet().ticketPriceUnit || '元'
      },
      filmDesc() {
        let v = this.$utils.calcNumSum([
          this.film.filmPrice,
          this.otherPayTotal
        ])
        v = this.$utils.toFixed(v, 2)
        return this.$utils.join(v, this.ticketPriceUnit)
      },
      filmCardDesc() {
        let v = this.$utils.toFixed(
          (this.film.cardInfo && this.film.cardInfo.money) || 0
        )
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      juyingCardDesc() {
        let v = this.$utils.toFixed(this.juying.cutPrice)
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      balanceDesc() {
        let v = this.$utils.toFixed(this.film.balance)
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      integralDesc() {
        let v = this.$utils.toFixed(this.film.integral)
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      titleDesc() {
        const v = this.$utils.toFixed(this.goods.price)
        return this.$utils.join(v, this.ticketPriceUnit)
      },
      couponDesc() {
        let v = this.$utils.toFixed(this.goods.couponMoney)
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      movieCardDesc() {
        let v = this.$utils.toFixed(
          this.goods.cardInfo && this.goods.cardInfo.money
        )
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      goodsBalanceDesc() {
        let v = this.$utils.toFixed(this.goods.balance)
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      },
      goodsIntegralDesc() {
        let v = this.$utils.toFixed(this.goods.integral)
        v = this.$utils.join(v, this.ticketPriceUnit)
        return this.$utils.join(v, '-', 'left')
      }
    },
    methods: {
      handleShow() {
        console.log(this.info, '=====info')
        console.log(this.film, '========')
        console.log(this.goods, '--------')
        this.$emit('showBefore')
        this.$nextTick(() => {
          this.show = !this.show
        })
      },
      handleClick() {
        this.$emit('click')
      },
      close() {
        this.show = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .btn-box {
    z-index: 2203;
    position: relative;
    background: #fff;

    .icon {
      transition: all 0.1s;
      transform: rotate(0deg);
    }
    .icon-show {
      transform: rotate(-180deg) !important;
    }
  }
</style>

<style lang="scss">
  //#ifdef MP-ALIPAY
  .content {
    min-height: 182rpx;
  }
  .content {
    padding-right: 30rpx;
  }
  .content-item {
    padding-bottom: 10rpx;
    padding-top: 10rpx;
  }
  //#endif
  .footerBtn-sheet {
    padding-left: 30rpx;
    box-sizing: border-box;

    .content {
      min-height: 182rpx;
    }
    .van-action-sheet__header {
      text-align: left;
      font-size: 36rpx;
      &::after {
        border: none;
      }
    }
    &.van-popup--bottom {
      bottom: 180rpx;
    }
    .content {
      padding-right: 30rpx;
    }
    .content-item {
      padding-bottom: 10rpx;
      padding-top: 10rpx;
    }
  }
</style>
